<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
             <el-button type="primary" @click="handleAdd()" size="small"  icon="el-icon-plus" v-has="'operatingTools:lotteryAllocation:add'">创建抽奖活动</el-button>
          </div>
        </div>
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%;"  border :height="tableHeight"   stripe v-loading="loading">
            <el-table-column prop="activityName" label="活动名称"  align="center"></el-table-column>
            <el-table-column prop="activityName" label="状态"  align="center">
             <!-- <template #default="scope">
               {{scope.row.startEnable=='1'?"启用":'禁用'}}
              </template> -->
              <template #default="scope">
                <div class="d-flex justify-center">
                  <MySwitch :value.sync="scope.row.startEnable" :id="scope.row.startEnable" text="启用|禁用" textValue="1|2" @changeStatus="handleChangeStatus(scope.row)" :permission="hasBtn('operatingTools:lotteryAllocation:add')"></MySwitch>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间"  align="center"></el-table-column>
            <el-table-column prop="name" label="操作"  width="300"  align="center" fixed="right">
              <template #default="scope">
                <div class="verticalBtn">
                  <el-button
                    size="medium"
                    type="text"
                    v-has="'operatingTools:lotteryAllocation:set'"
                    icon="el-icon-takeaway-box"
                    @click="handleSetPrize(scope.row)"
                  >奖品管理</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    v-has="'operatingTools:lotteryAllocation:record'"
                    icon="el-icon-user-solid"
                    @click="handleWinningList(scope.row)"
                  >中奖记录</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <!-- 新增活动 -->
    <el-dialog :title="dialogTitle" width="700px" v-dialogDrag :visible.sync="addVisible" @close="addVisible = false" :close-on-click-modal="false">
      <el-form  :model="form" status-icon :rules="rules" ref="form" label-position="right" >
       <el-form-item label="活动名称" prop="activityName" label-width="125px" >
          <el-input type="text" v-model="form.activityName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="startEnable" label-width="125px">
            <el-radio-group v-model="form.startEnable">
              <el-radio label="1">启用</el-radio>
              <el-radio label="2">停用</el-radio>
            </el-radio-group>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleActivitySubmit('form')" size="small" :loading="btnLoading">保 存</el-button>
      </div>
    </el-dialog>

    <!-- 奖品管理 -->
    <el-dialog title="奖品管理" width="1000px" v-dialogDrag :visible.sync="prizeSetVisible" @close="prizeSetVisible = false" :close-on-click-modal="false">
     <el-dialog width="600px" :title="innerTitle" :visible.sync="innerVisible" append-to-body v-dialogDrag >
          <el-form  :model="addPrizeForm" id="userDialog" status-icon :rules="addPrizeRules" ref="addPrizeForm" label-position="right" >
           <el-form-item label="奖品名称" prop="prizeName" label-width="125px" >
              <el-input type="text" v-model="addPrizeForm.prizeName" autocomplete="off" placeholder="请输入奖品名称"></el-input>
            </el-form-item>
            <el-form-item label="比例" prop="ratio" label-width="125px" >
              <el-input type="number" v-model="addPrizeForm.ratio" autocomplete="off" placeholder="请输入百分比"><template slot="append">%</template></el-input>

            </el-form-item>
            <el-form-item label="奖品数量" prop="prizeNumber" label-width="125px" >
              <el-input type="number" v-model="addPrizeForm.prizeNumber" autocomplete="off" placeholder="请输入奖品数量"></el-input>
            </el-form-item>
            <el-form-item label="已获奖数量" prop="getPrizeNumber" label-width="125px" >
              <el-input type="number" v-model="addPrizeForm.getPrizeNumber" autocomplete="off" placeholder="请输入已获奖数量"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort" label-width="125px" >
              <el-input type="number" v-model="addPrizeForm.sort" autocomplete="off" placeholder="请输入排序"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="innerVisible = false" size="small">取 消</el-button>
            <el-button type="primary" @click="handleAddPrizeSubmit('addPrizeForm')" size="small" :loading="btnLoading">保 存</el-button>
          </div>
      </el-dialog>
      <div style="margin-bottom: 15px;display: flex;">
        <el-button type="primary" @click="handleAddPrize()" icon="el-icon-add" size="small">添加奖品</el-button>

      </div>
      <el-table :data="prizeList" style="width: 100%;"  border    stripe v-loading="prizeLoading">
        <el-table-column prop="prizeName" label="奖品名称"  align="center"></el-table-column>
        <el-table-column prop="ratio" label="比例"  align="center"></el-table-column>
        <el-table-column prop="prizeNumber" label="奖品数量" align="center"></el-table-column>
        <el-table-column prop="getPrizeNumber" label="已获奖数量" align="center"></el-table-column>
        <el-table-column prop="sort" label="排序" align="center"></el-table-column>
        <el-table-column prop="name" label="操作"  width="200"  align="center" fixed="right">
          <template #default="scope">
            <div>
              <el-button
                size="medium"
                type="text"
                icon="el-icon-edit-outline"
                @click="handleEditPrize(scope.row)"
              >修改</el-button>
              <el-button
                size="medium"
                type="text"
                icon="el-icon-delete-solid"
                @click="handleDeltPrize(scope.row)"
              >删除</el-button>

            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 中奖记录列表 -->
    <el-dialog title="中奖记录列表" width="1000px" v-dialogDrag :visible.sync="winningListVisible" @close="winningListVisible = false" :close-on-click-modal="false">
      <div style="margin-bottom: 15px;display: flex;">
       <div class="search" ref="search">
         <el-form :inline="true" :model="winningSearchForm" size="small" ref="winningSearchForm" @submit.native.prevent class="demo-form-inline" id="searchBox">
           <el-form-item prop="activityStatus">
             <el-select filterable clearable v-model="winningSearchForm.prizeConfigId" placeholder="奖品名称">
                 <el-option :label="item.prizeName" :value="item.prizeConfigId" v-for="item in prizeList"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item prop="activityNo">
               <el-input v-model="winningSearchForm.telephone" clearable placeholder="用户手机号"></el-input>
           </el-form-item>

           <el-form-item class="clearfix">
             <el-button type="primary" @click="handleWinningSearch()" icon="el-icon-search">搜索</el-button>
           </el-form-item>
         </el-form>
       </div>
      </div>
      <el-table :data="winningList" style="width: 100%;"  border    stripe v-loading="prizeLoading">
        <el-table-column prop="prizeName" label="用户头像"  align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.userface" v-image-preview="scope.row.userface" style="height: 60px;" fit="fill"></el-image>
          </template>
        </el-table-column>
         <el-table-column prop="userName" label="用户昵称" align="center"></el-table-column>
        <el-table-column prop="prizeName" label="奖品名称"  align="center"></el-table-column>
        <el-table-column prop="telephone" label="用户手机号"  align="center"></el-table-column>
        <el-table-column prop="whetherDrawPrize" label="抽奖状态" align="center"></el-table-column>
        <el-table-column prop="orderAmount" label="订单金额" align="center"></el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" align="center"></el-table-column>
        <el-table-column prop="createTime" label="下单时间" align="center"></el-table-column>
      </el-table>
     <div class="page" ref="page">
         <MyPagination
          v-if="winningList.length"
           :total="total"
           :page.sync="winningSearchForm.pageNum"
           :limit.sync="winningSearchForm.pageSize"
           @pagination="getWinningList"
         />
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    addOrUpdatePrize,addPrizeActivity,delPrize,prizeActivityList,prizeConfigList, prizeDrawRecordList
  } from '@/api/getData'
  import option from '../../common/option.js';
  export default {
    data() {
      return {
        loading: false,
        btnLoading: false,

        dataList:[],
        tableColumn:[],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        dialogTitle:'',
        addVisible:false,
        form:{
          prizeActivityId:"",
          activityName :'',
          startEnable :'2'
        },
        rules: {
         activityName: [{required: true, message: '请输入活动名称',trigger: 'blur'}],
         startEnable : [{required: true, message: '请选择是否开启活动',trigger: 'blur'}]
        },

        prizeSetVisible:false,
        innerTitle:'',
        innerVisible:false,
        addPrizeForm:{
          prizeConfigId:'',
          prizeActivityId:'',
          activityName:"",
          prizeName:"",
          ratio:"",
          prizeNumber:"",
          getPrizeNumber:"",
          sort:''
        },
        addPrizeRules: {
         prizeName: [{required: true, message: '请输入奖品名称',trigger: 'blur'}],
         ratio: [{required: true, message: '请输入比例',trigger: 'blur'}],
         prizeNumber: [{required: true, message: '请输入奖品数量',trigger: 'blur'}],
        },

        prizeList:[],
        prizeLoading:false,

        winningListVisible:false,
        winningList:[],
        winningSearchForm:{
          prizeActivityId:'',
          telephone:"",
          prizeConfigId:"",
          pageNum:1,
          pageSize:10
        },
        total:0

      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight  - this.$refs.actionBtn.offsetHeight  - 55;
      })
    },
    methods: {
      async handleChangeStatus(row) {
        try {
          let data = {
            activityName: row.activityName,
            prizeActivityId: row.prizeActivityId,
            startEnable:row.startEnable
          }
          const result = await addPrizeActivity(data);
          if (result.code == 200) {
            this.$message.success(result.msg);
          } else {
            this.$message.error(result.msg);
            row.startEnable = (row.startEnable=='1'?'2':'1');
          }
        } catch (err) {
          console.log(err)
        }
      },
      handleDeltPrize(row){
          this.$confirm(`您确定要删除奖品？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delPrize({prizeConfigId:row.prizeConfigId }).then((result) => {
              if (result.code == '200') {
                   this.getPrizeList();
                   this.$message({
                     message: result.msg,
                     type: 'success'
                   });
               }else{
                  this.$message.error(result.msg);
               }
           });
          }).catch((err) => {
              console.log(err);
          });
      },
      handleWinningSearch(){
        this.winningSearchForm.pageNum = 1;
        this.getWinningList();
      },
      handleWinningList(row){
        this.winningSearchForm.prizeActivityId = row.prizeActivityId;
        this.winningListVisible = true;
        this.getWinningList();

        this.addPrizeForm.activityName = row.activityName;
        this.addPrizeForm.prizeActivityId  = row.prizeActivityId;
        this.getPrizeList();
      },
      async getWinningList(){
        try {
          this.prizeLoading = true;
          const result = await prizeDrawRecordList(this.winningSearchForm);
          if (result.code == 200) {
            this.$nextTick(()=>{
               this.total = result.total;
            })

            this.winningList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.prizeLoading = false;
        } catch (err) {
          this.prizeLoading = false;
          console.log(err)
        }
      },
      handleSetPrize(row){
        this.prizeSetVisible = true;
        this.addPrizeForm.activityName = row.activityName;
        this.addPrizeForm.prizeActivityId  = row.prizeActivityId;
        this.getPrizeList();
      },
      handleEditPrize(row){
        this.innerVisible = true;
        this.innerTitle = '编辑奖品';
        this.addPrizeForm.prizeConfigId = row.prizeConfigId;
        this.addPrizeForm.prizeName = row.prizeName;
        this.addPrizeForm.ratio = row.ratio;
        this.addPrizeForm.prizeNumber = row.prizeNumber;
        this.addPrizeForm.getPrizeNumber = row.getPrizeNumber;
        this.addPrizeForm.sort = row.sort;
      },
      async getPrizeList(){
        try {
          this.prizeLoading = true;
          const result = await prizeConfigList({prizeActivityId:this.addPrizeForm.prizeActivityId});
          if (result.code == 200) {
            this.prizeList = result.data;
          } else {
            this.$message.error(result.msg);
          }
          this.prizeLoading = false;
        } catch (err) {
          this.prizeLoading = false;
          console.log(err)
        }
      },
      handleAddPrize(){
        this.innerVisible = true;
        this.innerTitle = '新增奖品';
        this.addPrizeForm.prizeConfigId = '';
        this.addPrizeForm.prizeName = '';
        this.addPrizeForm.ratio = '';
        this.addPrizeForm.prizeNumber = '';
        this.addPrizeForm.getPrizeNumber = '';
        this.addPrizeForm.sort = this.prizeList.length+2;
      },
      handleAddPrizeSubmit(formName){
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            this.btnLoading = true;
            const result = await addOrUpdatePrize(this.addPrizeForm);
            if (result.code == 200) {
              this.$message.success(result.msg);
              this.innerVisible = false;
              this.getPrizeList()
            } else {
              this.$message.error(result.msg);
            }
            this.btnLoading = false;
          }
        })
      },
      async dataInfo() {
        try {
          this.loading = true;
          const result = await prizeActivityList();
          if (result.code == 200) {
            this.dataList = result.data;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      handleAdd(){
        this.dialogTitle = '创建活动';
        this.form = {
          activityName:'',
          startEnable:'2'
        };
        this.addVisible = true;
      },
      handleActivitySubmit(formName){
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            this.btnLoading = true;
            const result = await addPrizeActivity(this.form);
            if (result.code == 200) {
              this.$message.success(result.msg);
              this.addVisible = false;
              this.dataInfo();
            } else {
              this.$message.error(result.msg);
            }
            this.btnLoading = false;
          }
        })
      }


    }
  }
</script>

<style scoped lang="scss">

  .title{
    text-align: center;
    margin:5px 0;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }

</style>
